<script setup name="presets" lang="ts">
const _allPresets = [
    { "name": "脑", "values": [85, 40] },
    { "name": "肺", "values": [1500, -700] },
    { "name": "纵隔窗", "values": [400, 40] },
    { "name": "腹部", "values": [350, 40] },
    { "name": "骨窗", "values": [1600, 500], "suffix": "F4" },
    { "name": "脊柱", "values": [350, 60] },
    { "name": "软组织", "values": [80, 40], "suffix": "F7" },
    { "name": "内耳", "values": [4000, 700] },
    { "name": "CTA", "values": [500, 90] },
    { "name": "鼻窦", "values": [300, 35] },
    { "name": "肝脏", "values": [200, 40] },
    { "name": "结肠", "values": [350, 10] },
    { "name": "体部侧位", "values": [2000, 1000] },
    { "name": "牙齿", "values": [3000, 400] },
    { "name": "体部正位", "values": [2000, 200] },
    { "name": "四肢", "values": [500, 40] },
    { "name": "颈部脑", "values": [300, 45] },
    { "name": "儿童内耳", "values": [4000, 400] },
    { "name": "头部和颈部", "values": [2000, 200] },
    { "name": "四肢", "values": [550, 100] }
]

const emits = defineEmits(['change'])

const handlePresetsClick = (item:any) => {
    emits('change',item.values)
}

onMounted(()=>{
    
})

</script>
<template>
    <div class="main-container presets">
        <template v-for="item, index in _allPresets" :key="index">
            <div class="item" @click="handlePresetsClick(item)">{{ item.name }}：{{ item.values[0] }},{{ item.values[1] }}&emsp;{{
                item.suffix ? '快捷键：' + item.suffix : '' }}</div>
        </template>
    </div>
</template>
<style lang="scss"></style>
<style lang="scss" scoped>
.main-container.presets {
    position: absolute;
    z-index: 1;
    top: -65px;
    left: 100px;
    display: table;
    background-color: #3d3d3d;
    color: #fff;
    font-size: 14px;
    padding: 10px 10px;
    border: solid 2px #fff;

    .item {
        width: 215px;
        height: 30px;
        line-height: 30px;
        border-bottom: dashed 1px #666;
        cursor: pointer;

        &::before {
            content: '·';
            padding-right:1px;
            opacity: 0;
        }


        &:hover {
            color: #99CCFF;

            &::before {
                content: '·';
                padding-right:1px;
                opacity: 1;
                color:#99CCFF;
            }
        }
    }
}
</style>